<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-row :gutter="10" type="flex">
        <el-col :span="2">
          <div style="height: 100%;line-height: 40px">工单名称：</div>
        </el-col>
        <el-col :span="8">
          <!-- 输入名称 -->
          <el-input
            v-model="inputName"
            placeholder="输入名称"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <div style="height: 100%;line-height: 40px">前缀：</div>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="prefix"
            placeholder="前缀"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <div style="height: 100%;line-height: 40px">范围：</div>
        </el-col>
        <el-col :span="3">
          <!-- 第一个数字输入框 -->
          <el-input
            v-model="inputNumber1"
            :min="0"
            :max="99"
            type="number"
            placeholder="0-100"
            @blur="inp1Blur"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <!-- 第二个数字输入框 -->
          <el-input
            v-model="inputNumber2"
            :min="minValueForInput2"
            :max="100"
            type="number"
            placeholder="0-100"
            @blur="inp2Blur"

          ></el-input>
        </el-col>
        <el-col :span="10">
          <span> </span>
        </el-col>
        <el-col :span="2">
          <!-- 提交按钮 -->
          <el-button :disabled="isSub" @click="submit" type="primary" style="width: 100%;">提交</el-button>
        </el-col>

      </el-row>
      <el-row style="margin-top: 12px;">
        <el-col :span="12">
          <el-input
            v-model="orderID"
            placeholder="订单编号"
          ></el-input>
        </el-col>
      </el-row>

      <div v-for="(item, index) in jobs" :key="index" class="job-line"
           :style="{background: mainJobIndex===index ? '#d5b778': ''}"
      >
        <span :style="{color: mainJobIndex===index ? 'white': ''}" style="height: fit-content">
          <i class="el-icon-tickets" style="font-size: 18px; margin-left: 10px"></i>
          <span style="font-size: 18px; margin-left: 10px">{{ item.template.name }}</span>
        </span>

        <el-button style="margin-left: auto; margin-right: 5px" @click="mainJobIndex = index;">设置主工单</el-button>
      </div>


      <div class="plus-container" @click="dialogVisible = true;">
        <div class="plus">+</div>
      </div>
    </el-card>

    <el-dialog
      title="添加模板"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <div v-if="templates&&templates.length===0" class="el-empty">
          <div class="el-empty__image">
            <svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <defs>
                <linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%">
                  <stop stop-color="#FCFCFD" offset="0%"/>
                  <stop stop-color="#EEEFF3" offset="100%"/>
                </linearGradient>
                <linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%">
                  <stop stop-color="#FCFCFD" offset="0%"/>
                  <stop stop-color="#E9EBEF" offset="100%"/>
                </linearGradient>
                <rect id="path-3-1" x="0" y="0" width="17" height="36"/>
              </defs>
              <g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="B-type" transform="translate(-1268.000000, -535.000000)">
                  <g id="Group-2" transform="translate(1268.000000, 535.000000)">
                    <path id="Oval-Copy-2"
                          d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z"
                          fill="#F7F8FC"
                    />
                    <polygon id="Rectangle-Copy-14" fill="#E5E7E9"
                             transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) "
                             points="13 58 53 58 42 45 2 45"
                    />
                    <g id="Group-Copy"
                       transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"
                    >
                      <polygon id="Rectangle-Copy-10" fill="#E5E7E9"
                               transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) "
                               points="2.84078316e-14 3 18 3 23 7 5 7"
                      />
                      <polygon id="Rectangle-Copy-11" fill="#EDEEF2"
                               points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"
                      />
                      <rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)"
                            transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) "
                            x="38" y="7" width="17" height="36"
                      />
                      <polygon id="Rectangle-Copy-13" fill="#F8F9FB"
                               transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) "
                               points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
                      />
                    </g>
                    <rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"/>
                    <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
                      <mask id="mask-4-1" fill="white">
                        <use xlink:href="#path-3-1"/>
                      </mask>
                      <use id="Mask" fill="#E0E3E9"
                           transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) "
                           xlink:href="#path-3-1"
                      />
                      <polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)"
                               transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "
                               points="7 0 24 0 20 18 -1.70530257e-13 16"
                      />
                    </g>
                    <polygon id="Rectangle-Copy-18" fill="#F8F9FB"
                             transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) "
                             points="62 45 79 45 70 58 53 58"
                    />
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <div class="el-empty__description"><p>暂无工单模板</p></div><!----></div>
        <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
          <el-col v-for="(item,index) in templates" :key="index" :span="6" style="margin-top:12px;">
            <el-card shadow="always" style="cursor: pointer;"
                     @click.native="addJob(index)"
            >
              <el-row :gutter="12" style="height:100%;align-items:center;" type="flex">
                <el-col :span="4" :offset="1" style="padding:0;margin-right: 6px;">
                  <i class="el-icon-s-order" :style="{color: item.used ? 'gray' : 'black'}"
                     style="font-size:32px;color:#606266;"/>
                </el-col>
                <el-col :span="20" style="font-size:16px;height:100%;display:flex;text-align:start;align-items:center;"
                        :style="{color: item.used ? 'gray' : 'black'}"
                >
                  {{ item.name }}
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>


    </el-dialog>
  </div>
</template>

<script>
import {
  multiAdd,
  getTemplateList,
} from '@/api/table'

export default {
  name: 'creatMultipleOrder',
  computed: {
    minValueForInput2() {
      // 确保inputNumber2的最小值总是大于inputNumber1
      return parseInt(this.inputNumber1) + 1;
    }
  },
  created() {
    if (this.$route.query.saleID) {
      this.orderID = this.$route.query.saleID
    }
    getTemplateList().then(res => {
      this.templates = res.data.data
      for (let i = 0; i < this.templates.length; i++) {
        this.templates[i].used = false
      }
    })
  },
  data() {
    return {
      prefix: '',
      isSub: false,
      dialogVisible: false,
      mainJobIndex: -1,
      jobs: [],
      templates: null,
      inputName: '',
      inputNumber1: '',
      inputNumber2: '',
      user: this.$store.getters.userInfo,
      orderID: ''
    }
  },
  methods: {
    submit() {
      //获取mainOrder
      if (this.mainJobIndex < 0) {
        this.$message.error("请选择主工单")
        return
      }
      if (this.inputName === '' || this.inputNumber1 === '' || this.inputNumber2 === '') {
        this.$message.error("请输入名称和范围")
        return
      }

      this.isSub = true
      let nameList = []
      for (let i = parseInt(this.inputNumber1); i <= parseInt(this.inputNumber2); i++) {
        nameList.push(`${this.inputName}_${this.prefix}${i}`)
      }
      let te = this.jobs[this.mainJobIndex].template
      let upData = {
        nameList,
        "pre_cast_id": "",
        "sell_id": this.orderID,
        "name": te.name,
        "creator": this.user.uid,
        "handler": this.user.uid,
        "header_id": te.header_id,
        "header_value": JSON.parse(te.description).header,
        "body_list": te.body_list,
        "body_value": (() => {
          let rt = {}
          te.body_list.forEach((i, index) => {
              rt[i] = {"retData": {}, "exportObj": {}, "fe": "", "num": index + 1}
            }
          )
          return rt
        })(),
        "tail_id": te.tail_id,
        "tail_value": JSON.parse(te.description).tail,
        "problem": "",
        "return_reason": "",
        "return_process": "",
        "subTable": []
      }

      for (let job of this.jobs.filter((i, index) => index !== this.mainJobIndex)) {
        let te = job.template
        upData["subTable"].push({
          "pre_cast_id": "",
          "sell_id": this.orderID,
          "name": te.name,
          "creator": this.user.uid,
          "handler": this.user.uid,
          "header_id": te.header_id,
          "header_value": JSON.parse(te.description).header,
          "body_list": te.body_list,
          "body_value": (() => {
            let rt = {}
            te.body_list.forEach((i, index) => {
                rt[i] = {"retData": {}, "exportObj": {}, "fe": "", "num": index + 1}
              }
            )
            return rt
          })(),
          "tail_id": te.tail_id,
          "tail_value": JSON.parse(te.description).tail,
          "problem": "",
          "return_reason": "",
          "return_process": "",
        })
      }
      multiAdd(upData).then(res => {
        this.$message.success('批量创建成功！')
        this.isSub = false
      }).catch(res => {
        this.isSub = false
      })
    },
    addJob(index) {
      if (!this.templates[index].used) {
        this.dialogVisible = false
        this.jobs.push({
          template: JSON.parse(JSON.stringify(this.templates[index])),
          mainJob: false
        })
        this.templates[index].used = true
      }
    },
    inp1Blur() {
      if (this.inputNumber1 > 99) {
        this.inputNumber1 = 99;
      }
      if (this.inputNumber1 < 0) {
        this.inputNumber1 = 0;
      }
    },
    inp2Blur() {
      console.log(typeof this.inputNumber2)
      if (this.inputNumber2 > 100) {
        this.inputNumber2 = 100;
      }
      if (this.inputNumber2 < this.minValueForInput2) {
        this.inputNumber2 = this.minValueForInput2;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px; /* 根据需要调整宽度 */
}

.flex-spacer {
  flex: 1;
}

.plus-container {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;

  .plus {
    cursor: pointer;
  }
}

.job-line {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 50px;
  margin: 10px 0;

  display: flex;
  align-items: center;
}

.template-btn {
  ::v-deep .el-icon-s-order {
    font-size: 32px;
  }

  min-height: 64px;
  padding: 8px;
  border-radius: 6px;
}

.my-card {
  height: 88px;
  padding: 0 12px;

  ::v-deep .el-card__body {
    height: 100%;
    padding: 0;
    text-align: center;
  }
}

.el-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding: 40px 0;
}

.el-empty__image {
  width: 160px;
}


</style>

